<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>市场地图</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- App favicon -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">

    <!-- App css -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/metismenu.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="assets/css/custom.css" />
    <!-- layer插件 -->
    <link rel="stylesheet" type="text/css" href="plugins/layer2.4/skin/layer.css" />

    <!-- datatables插件 -->
    <!-- <link href="plugins/datatables/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
	<link href="plugins/datatables/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css" />
	<link href="plugins/datatables/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css" /> -->
    </script>

    <script src="assets/js/modernizr.min.js"></script>


    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            /* overflow: hidden; */
            margin: 0;
            font-family: "微软雅黑";
        }

        #allmap {
            float: right;
            margin-right: 240px;
            width: 65%;
            height: 1000px;
            margin: 0;
            font-family: "微软雅黑";
        }

        @media (max-width:1280px) {
            #allmap {
                float: right;
                margin-right: 0;
                width: 50%;
                height: 1000px;
                margin: 0;
                /* overflow: hidden; */
                font-family: "微软雅黑";
            }

            @media (max-width:1160px) {
                #allmap {
                    float: right;
                    margin-right: 0;
                    width: 60%;
                    height: 1000px;
                    margin: 0;
                    /* overflow: hidden; */
                    font-family: "微软雅黑";
                }
            }

            @media (max-width:1070px) {
                #allmap {
                    float: right;
                    margin-right: 0;
                    width: 50%;
                    height: 1000px;
                    margin: 0;
                    /* overflow: hidden; */
                    font-family: "微软雅黑";
                }
            }
        }
    </style>

</head>

<body>
    <div id="wrapper">
        <div class="left side-menu">

            <div class="slimscroll-menu" id="remove-scroll">

                <!-- LOGO -->
                <div class="topbar-left">
                    <a href="index.html" class="logo">
                        <span>
                            <img src="assets/images/logo.png" alt="" height="22">
                        </span>
                        <i>
                            <img src="assets/images/logo_sm.png" alt="" height="28">
                        </i>
                    </a>
                </div>

                <!-- 用户区域 -->
                <div class="user-box">
                    <!-- <div class="user-img">
							<img src="assets/images/users/avatar-1.jpg" alt="user-img" title="Mat Helme" class="rounded-circle img-fluid">
						</div>
						<h5><a href="#">超级管理员</a> </h5>
						<p class="text-muted">超管</p> -->
                </div>

                <!--- 侧边菜单 -->
                <div id="sidebar-menu">

					<ul class="metismenu" id="side-menu">
						<!-- 主页 -->
						<li>
							<a href="index.html">
								<i class="fi-air-play"></i>
								<!--<span class="badge badge-danger badge-pill float-right">7</span> -->
								<span> 主页 | 控制台 </span>
							</a>
						</li>
						<!-- 地图 -->
						<li>
							<a href="MapSalesTerminal.html"><i class="fi-location-2"></i> <span> 销售终端地图 </span></a>
						</li>
						<!--脚标机监控-->
						<li>
							<a href="javascript: void(0);"><i class="fa fa-desktop"></i> <span> 脚标机监控 </span> <span
									class="menu-arrow"></span></a>
							<ul class="nav-second-level" aria-expanded="false">
								<li><a href="BarcodeMachineStatusList.html">脚标机监控</a></li>
								<li><a href="BarcodeMachineAlertList.html">报警信息记录</a></li>
							</ul>
						</li>
						<!-- 基础数据管理 -->
						<li>
							<a href="javascript: void(0);"><i class="fa fa-wpforms"></i> <span> 基础数据管理 </span> <span
									class="menu-arrow"></span></a>
							<ul class="nav-second-level" aria-expanded="false">
								<li><a href="SlaughterHouseList.html">市场管理</a></li>
								<li><a href="StallsList.html">档口管理</a></li>
								<li><a href="BarcodeMachineList.html">脚标机管理</a></li>
								<li><a href="IdCardList.html">ID卡数据管理</a></li>
								<li><a href="SalesTerminalList.html">销售终端管理</a></li>
								<li><a href="PoultryCategoryList.html">禽类信息管理</a></li>
							</ul>
						</li>
						<!--条形码发放回收记录-->
						<li>
							<a href="javascript: void(0);"><i class="fa fa-barcode"></i> <span> 条形码发放回收管理 </span> <span
									class="menu-arrow"></span></a>
							<ul class="nav-second-level" aria-expanded="false">
								<li><a href="BarcodeGrantList.html">条形码发放记录管理</a></li>
								<li><a href="BarcodeRecoveryList.html">条形码回收记录管理</a></li>
							</ul>
						</li>
						<!--脚标机发放回收-->
						<li>
							<a href="javascript: void(0);"><i class="fa fa-print"></i> <span> 脚标机发放回收管理 </span> <span
									class="menu-arrow"></span></a>
							<ul class="nav-second-level" aria-expanded="false">
								<li><a href="BarcodeMachineGrantList.html">脚标机发放管理</a></li>
								<li><a href="BarcodeMachineRecoveryList.html">脚标机回收管理</a></li>
							</ul>
						</li>
						<!--脚标机报废记录-->
						<li>
							<a href="javascript: void(0);"><i class="fa fa-wrench"></i> <span> 脚标机报废维修管理 </span> <span
									class="menu-arrow"></span></a>
							<ul class="nav-second-level" aria-expanded="false">
								<li><a href="BarcodeMachineRepairList.html">脚标机报修记录管理</a></li>
								<li><a href="BarcodeMachineScrapList.html">脚标机报废记录管理</a></li>
							</ul>
						</li>
						<!--ID卡发放管理-->
						<li>
							<a href="javascript: void(0);"><i class="fa fa-id-card"></i> <span> ID卡发放回收管理 </span> <span
									class="menu-arrow"></span></a>
							<ul class="nav-second-level" aria-expanded="false">
								<li><a href="IdCardGrantList.html">ID卡发放记录管理</a></li>
								<li><a href="IdCardRecoveryList.html">ID卡回收记录管理</a></li>
							</ul>
						</li>
						<!--贴码管理-->
						<li>
							<a href="LabelingRecordList.html"><i class="fa fa-qrcode"></i> <span>贴标信息管理 </span></a>
						</li>
						<!--用户管理-->
						<li>
							<a href="javascript: void(0);"><i class="fa fa-user"></i> <span> 用户管理 </span> <span
									class="menu-arrow"></span></a>
							<ul class="nav-second-level" aria-expanded="false">
								<li><a href="SysUserList.html">用户信息管理</a></li>
								<li><a href="SysUserRoleList.html">用户角色管理</a></li>
							</ul>
						</li>
						<!--角色管理-->
						<li>
							<a href="SysRoleMenuList.html"><i class="fa fa-users"></i> <span> 角色权限管理 </span> </a>
						</li>
						<!--日志管理-->
						<li>
							<a href="LogRecordList.html"><i class="fa fa-qrcode"></i> <span>日志信息管理 </span></a>
						</li>
					</ul>
					</li>
					</ul>

				</div>
                <!-- Sidebar -->

                <div class="clearfix"></div>
            </div>
            <!-- Sidebar -left -->
        </div>

        <!-- zheng -->
        <div style="display:inline">
            <div class="" style="margin-left: 320px;margin-top: 50px;float:left;width: 10%;height:1000px;">
                <div class="card-box" style="width:100%;height:1000px;">
                    <div class="select-market-container">
                    </div>
                    <div class="saleAddrList" style="text-align: center;"></div>
                </div>
            </div>
            <div id="allmap" style="margin-top: 50px; float:left"></div>
        </div>
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/bootstrap.bundle.min.js"></script>
        <script src="assets/js/metisMenu.min.js"></script>
        <script src="assets/js/jquery.slimscroll.js"></script>
        <script src="assets/js/jquery.core.js"></script>
        <script src="assets/js/jquery.app.js"></script>
        <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=3WO11jODE5DEq1yM0EGkQe6hWWVoxRZK"></script>
        <script type="text/javascript" src="//api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script>
        <script type="text/javascript">
            let URL = "http://39.108.147.139:9091/"
            var map = new BMap.Map("allmap");
            var myGeo = new BMap.Geocoder();
            
            let pointAdds = []
            map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
            $(document).ready(function () {
                //请求全部市场
                getMarket()

            })

            // 请求全部市场
            function getMarket() {
                $.ajax({
                    type: 'get',
                    url: URL + 'slaughterHouse',
                    dataType: 'json',
                    success: (data) => {
                        let items = ''
                        data = data.object
                        let marketId = data[0].id //初始化
                        data.forEach(e => {
                            items += `<option value="${e.id}">${e.name}</option>`
                        })
                        let str =
                            `<select class="form-control select-market" style="width: 100%;margin-bottom: 50px;">
								${items}
							</select>`
                        $('.select-market-container').html(str)
                        //取得市场的值交给后台
                        sendSelectMarketFun(marketId)
                        $(".select-market").change(() => {
                            marketId = $(".select-market").val()
                            sendSelectMarketFun(marketId)
                        })
                    },
                    error: () => {
                        alert('请求市场失败')
                    }
                })
            }

            function sendSelectMarketFun(marketId) {
                $.ajax({
                    type: 'GET',
                    url: `${URL}PoultrySales/findAll/chart/by/house?house_id=${marketId}`,
                    dataType: "json",
                    async: false,
                    success: (data) => {
                        data = data.object
                        if (data.length === 0) {
                            alert('暂无销售去向数据')
                            return
                        }
                        let adds = []
                        console.log(data)
                        salesAddr = data.map(item => item.salesAddr)
                        console.log(salesAddr)
                        salesAddr = new Set(salesAddr)
                        

                        // 清除覆蓋物
                        map.clearOverlays()
                        adds.push(data[0].houseAddr)
                        adds = [...adds, ...salesAddr]
                        console.log(adds)
                        makeLeftAddrList(adds)
                        
                        // 中心点
                        // let houseAddr
                        myGeo.getPoint(data[0].houseAddr, function (point) {
                            if (point) {
                                let houseAddr = new BMap.Point(point.lng, point.lat);
                                map.centerAndZoom(new BMap.Point(houseAddr.lng, houseAddr.lat),
                                    13)
                                bdGEO(adds, houseAddr)
                            }
                        })
                    },
                    error: () => {
                        alert('请求销售去向失败')
                    }
                })
            }

            function makeLeftAddrList(adds) {
                let items = ''
                let itemTop = `<h4>销售产地</h4><li class="list-group-item">${adds[0]}</li><h4 style="margin-top:20px">销售去向</h4>`
                let addsSafe = adds.slice(1)
                items = addsSafe.map(item => {
                    return str = `<li class="list-group-item">${item}</li>`
                })
                items = items.join('')
                items = itemTop+items
                console.log(items)
                let body = `<ul class="list-group">${items}</ul>`
                $('.saleAddrList').html(body)
            }
            // 进行格式转换
            function bdGEO(adds, houseAddr) {
                let index = 0
                adds.map(() => {
                    var add = adds[index]
                    geocodeSearch(add, adds, houseAddr);
                    index++;
                })
            }

            function geocodeSearch(add, adds, houseAddr) {

                myGeo.getPoint(add, function (point) {
                    if (point) {
                        var address = new BMap.Point(point.lng, point.lat);
                        addMarker(address, houseAddr, new BMap.Label(add, {
                            offset: new BMap.Size(20, -10)
                        }));
                    }
                });
            }
            // 进行渲染
            function addMarker(point, houseAddr, label) {
                console.log(point)
                var marker = new BMap.Marker(point);
                map.addOverlay(marker);
                addOverlayLine(houseAddr, point)
                marker.setLabel(label);
            }

            function addOverlayLine(houseAddr, point) {
                console.log(point)
                // pointAdds.push(point)
                map.addOverlay(new BMapLib.CurveLine([
                    new BMap.Point(houseAddr.lng, houseAddr.lat),
                    new BMap.Point(point.lng, point.lat),
                ], {
                    strokeColor: "red",
                    strokeWeight: 3,
                    strokeOpacity: 1
                }))
            }
        </script>
</body>

</html>